<template>
  <gg-form-item :tip="tip" :label="label" :message="message" :messageDisplay="messageDisplay" :labelWidth="localLabelWidth" :layout="localLayout">
    <view class="gg-code-area">
      <view class="gg-code-input-area">
        <input class="gg-code-input-item" placeholder-class="gg-code-input-item-placeholder" v-model="localVal" type="number" :maxlength="maxlength"
          :placeholder="diyPlaceholder" @input="updateInput" />
      </view>
      <view class="gg-code-button-area">
        <button class="gg-code-button-item " :class="btnDisabled?'gg-code-button-wait':''" :disabled="btnDisabled"
          @tap="getSmsCode">{{btnText}}</button>
      </view>
    </view>
  </gg-form-item>
</template>
<script>
import MixinsCommon from '../mixins/mixins-common.js';
export default {
  mixins: [MixinsCommon],
  name: "GgCodeSms",
  inject: {
    ggFormGroup: {
      default() {
        return null
      }
    }
  },
  props: {
    label: {
      type: String,
      default: "短信验证"
    },
    maxlength: {
      type: [Number, String],
      default: -1
    },
    value: {
      type: [Number, String],
      default: ""
    },
    message: {
      type: String,
      default: ""
    },
    messageDisplay: {
      type: Boolean,
      default: false
    },
    mobile: {
      type: String,
      default: ""
    },
    mobileParam: {
      type: String,
      default: "mobile"
    },
    codeUrl: {
      type: String,
      default: ""
    },
    codeSign: {
      type: Boolean,
      default: false
    },
    codeApiFunc: {
      type: Function,
      default: null
    },
    waitTime: {
      type: String,
      default: "60"
    }
  },
  data() {
    return {
      nextTime: 0,
      localVal: '',
      localSmsMobile: '',
      diyPlaceholder: '短信验证码',
      btnDisabled: false,
      btnText: '获取验证码',
      btnIntervalObj: null,
    };
  },
  watch: {
    mobile(newVal) {
      this.localMobile = newVal;
    }
  },
  created() {
    this.localMobile = this.mobile;
  },
  methods: {
    showToast2(msg) {
      uni.showToast({
        title: msg,
        duration: 1200,
        icon: 'none'
      });
    },
    // ******获取短信验证码************************************* */
    getSmsCode() {
      if (!this.localMobile || this.localMobile.length != 11) {
        this.showToast2('手机号不正确');
        return;
      }
      let mobileReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (!mobileReg.test(this.localMobile)) {
        this.showToast2('手机号格式正确');
        return;
      }

      if (!this.codeUrl && !this.codeApiFunc) {
        this.showToast2('短信接口地址不能为空');
        return;
      }
      this.btnDisabled = true;
      /* 请求接口 */
      if (this.btnIntervalObj) {
        // console.log('请勿重复提交验证码发送请求');
        return;
      }
      if (this.btnDisabled) {
        this.btnText = '请稍后...';
        if (this.codeApiFunc) {
          this.codeApiFunc({
            postType: 'sendSms',
            cto_sms_type: 'alterMobile',
            sendCode: '发送验证码',
            [this.mobileParam]: this.localMobile
          }).then((successRes) => {
            let apiData = successRes;
            if (apiData.status == 200) {
              this.showToast2('发送成功！');
              setTimeout(() => {
                if (this.codeSign) {
                  let sign = (apiData.data && apiData.data.sign) || '';
                  this.diyPlaceholder = "识别码：" + sign
                }
                this.smsCodeWaitTime();
              }, 500);
            }
          });
        } else {
          console.warn('url请求未完善，请使用：codeApiFunc')
          this.btnDisabled = false;
          this.btnText = '重新获取验证码';
        }

      }
    },

    smsCodeWaitTime() {
      this.nextTime = Date.parse(new Date()) / 1000 + parseInt(this.waitTime);
      this.btnIntervalObj = setInterval(() => {
        let currTime = this.nextTime - (Date.parse(new Date()) / 1000);
        if (currTime <= 0) {
          clearInterval(this.btnIntervalObj);
          this.btnText = '重新获取验证码'
          this.btnIntervalObj = 0;
          this.btnDisabled = false;
        } else {
          this.btnDisabled = true;
          this.btnText = currTime.toString() + 's'// '秒后重试';
        }
      }, 100);
    },
    updateInput(e) {
      this.$emit('input', this.localVal);
    },
  }
};
</script>

<style>
.gg-code-area {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
}
.gg-code-input-area {
  width: calc(100% - 120px - 10px);
  float: left;
}
.gg-code-input-item {
  height: 35px;
  line-height: 35px;
}
.gg-code-input-item-placeholder {
  font-size: 14px;
}
.gg-code-button-area {
  width: 120px;
  float: right;
  height: 35px;
}
.gg-code-button-item {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  background-color: #007aff;
  color: #ffffff;
}
</style>